<template>
  <div v-if="show1" @click.stop class="confirm">
    <div class="confirm-panel  animated fadeIn fastest">
      <div>{{ text }}</div>
      <div class="btn-hub">
        <button
          @click="
            show1 = false;
            func();
          "
        >
          确认
        </button>
        <button @click="close">取消</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "",
      show1: false,
      func: null
    };
  },
  methods: {
    show(obj) {
      this.text = obj.text;
      this.func = obj.callback;
      this.show1 = true;
    },
    close() {
      this.show1 = false;
    }
  }
};
</script>

<style lang="less" scoped>
.confirm {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 999999;
  .confirm-panel {
    box-shadow: 1px 2px 4px #dfdfdf;
    border: 1px solid #dfdfdf;
    border-radius: 0.12rem;
    width: 8rem;
    text-align: center;
    padding: 0.24rem;
    padding-top: 0.48rem;
    margin: 40vh auto 0;
    font-size: 0.56rem;
    background: #fff;
    .btn-hub {
      display: flex;
      justify-content: center;
      button {
        margin: 0.5rem;
        border: 1px solid #dfdfdf;
        background: none;
        color: #666666;
        padding: 0.12rem 0.24rem;
      }
    }
  }
}
</style>
